import { FC, memo, useCallback } from 'react';
import { AiOutlineCopy } from 'react-icons/all';

import styles from './copyAble.module.less';
import copyTextToClipboard from '@/utils/copyTextToClipboard';
import { message } from 'antd';

interface ICopyAbleProps {
  text: string;
  showText?: string;
  successNotice?: string;
  errorNotice?: string;
}

const CopyAble: FC<ICopyAbleProps> = (props) => {
  const showText = props.showText || props.text;
  const handleCopy = useCallback((e) => {
    e.stopPropagation();

    const flag = copyTextToClipboard(props.text || props.showText);
    if (flag) {
      message.success(props.successNotice || '复制成功');
    } else {
      message.error(props.errorNotice || '复制失败');
    }
  }, []);

  return (
    <span className={`flex ai-center ${styles.copyAble}`}>
      <span onClick={(e) => handleCopy(e)}>{showText}</span>
      <AiOutlineCopy
        style={{ fontSize: '16px' }}
        onClick={(e) => handleCopy(e)}
      />
    </span>
  );
};

export default memo(CopyAble);
